<template>
  <section>

    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-select v-model="selectOptions.query" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-form-item>
          <el-input :placeholder="selectOptions.query" v-model="selectOptions.keywords" @keyup.enter.native="doSearch"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="doSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background: #13ce66" v-on:click="_reload">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="feeds" highlight-current-row v-loading="listLoading"
              style="width: 100%;" element-loading-text="玩命请求中。。。">
      <el-table-column label="ID" width="80" prop="id">
      </el-table-column>

      <el-table-column prop="type" label="反馈类型" width="100" :formatter="getType">
      </el-table-column>

      <el-table-column prop="content" label="反馈内容" min-width="280">
        <template slot-scope="scope">
          <div class="contentPic" v-if="scope.row.pics">
            <span class="piclist" v-for="pic in scope.row.pics.pics">
              <a :href="pic" target="_blank"> <img :src="pic"></a>
            </span>
          </div>
          <p>
            {{scope.row.content}}
          </p>
        </template>
      </el-table-column>
      
      <el-table-column prop="phone" label="反馈者手机号" width="180">
      </el-table-column>
      <el-table-column prop="nickname" label="反馈者" width="180">
      </el-table-column>
    	<el-table-column prop="create_time" label="反馈时间" width="180">
      </el-table-column>

      <el-table-column label="回复" width="250">
        <template slot-scope="scope">
          <div @click="adminComment(scope.row)">
            <p v-if="scope.row.admin_comment == ''">点击回复</p>
            <font color="red" v-else>{{scope.row.admin_comment}}</font>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectOptions.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{total}} 条数据</span>
    </el-col>

  </section>
</template>

<script>
  import util from '../../util'
  import NProgress from 'nprogress'
	import { apiTree } from '../../apiTree'

  export default {
    data() {
      return {
        options: [
          {value: 'id', label: 'ID'},
          {value: 'phone', label: '手机号'}
        ],
        feeds: [],
        total: 0,
        listLoading: false,
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
          query: this.$route.query.query !== undefined ? this.$route.query.query : '',
          keywords: this.$route.query.keywords !== undefined ? this.$route.query.keywords : '',
          status: this.$route.query.status !== undefined ? this.$route.query.status : ''
        }
      }
    },
    methods: {
      adminComment(row) {
        console.log(row)
        this.$prompt('请输入回复内容', '评论回复:'+ row.id, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: row.admin_comment
         // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
         // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          console.log(row.value)
          apiTree('user/feedback', 'user/feedBackComment', {
            'id': row.id,
            'admin_comment': value
          }).then((res) => {
            this.getFeedBackList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      getType(row) {
        if (row.type === '1') {
          return '配送'
        } else if (row.type === '2') {
          return '种植'
        } else if (row.type === '3') {
          return '收菜'
        } else if (row.type === '4') {
          return '预约'
        } else if (row.type === '5') {
          return '功能'
        } else {
          return '其他'
        }
      },
      // 搜索
      doSearch() {
        if (this.selectOptions.query) {
          this.$router.push({path: this.$route.path, query: this.selectOptions})
        }
      },
      _reload() {
        this.getFeedBackList()
      },
      // 分页
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      // 获取用户反馈列表
      getFeedBackList() {
        let para = this.$route.query
        if (util.isEmptyObject(para)) {
          this.selectOptions = {
            page: 1,
            query: '',
            keywords: '',
            status: ''
          }
        }
        this.listLoading = true
        NProgress.start()
        apiTree('user/feedback', 'user/feedBack', para).then((res) => {
          this.total = res.d.total_num
          this.feeds = res.d.data
          this.listLoading = false
          NProgress.done()
        })
      }
    },
    created() {
      this.getFeedBackList()
    },
    watch: {
      $route: 'getFeedBackList'
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .piclist {
	    display: inline-block
	    width: 50px
	    height: 50px
      float: left

	    overflow: hidden
	    padding: 10px
  	}  
</style>
